<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
      <style>
          body{
margin: 0
          }
          input[type=search]::-ms-clear{
  display: none;
}
input::-webkit-search-cancel-button{
  display: none;
}
          .search_box{width: 100%;position: fixed;top: 0;left: 0;height:30px;box-sizing: border-box;;padding: 0 15px;;margin-top: 10px;border-radius:50%;}
          .search{position:absolute;top: 0;left: 0;width: 100%;height: 30px;box-sizing: border-box;border-radius: 50px;;padding: 0 15px;;}
          .search img{width: 18px;height:18px;position: absolute;;right: 26px;top: 50%;transform: translateY(-50%);}
          .search input{width: 100%;display: inline-block;height: 30px;padding-left: 10px;background: #F6F6FA;border-radius: 8px;box-sizing: border-box;color: #666;font-size: 13px; border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */;background-image: none}
          .search input:focus{outline: none}
          .search input::-webkit-input-placeholder {color:#333;font-size: 12px;}
          .search input input::-moz-placeholder{color:#333;font-size: 12px;}
          .search input input:-moz-placeholder {color:#333;font-size: 12px;}
          .search input input:-ms-input-placeholder {color:#333;font-size: 12px;}
          :focus{outline: none}
          .btn{position: fixed;;bottom: 20px;left:0;z-index: 1000000;width: 100%;padding: 0 15px;box-sizing: border-box;padding-top: 10px;}
            .btn p{padding-top: 10px;}
          .btn button{width: 150px;height: 40px;display: inline-block;border: none;color: #fff;background-color: #fc8622;line-height: 40px;text-align: center;font-size: 13px;box-sizing: border-box;}
          .le{float: left;}
          .ri{float: right;}
          .clearfix{clear: both;}
      </style>
  </head>
  <body>
    <div class="search_box">
    <div class="search">
        <img src="../../image/index_search1.png" onclick="search()" alt="">


          <input type="search" id="search" name="" onblur="search()" onsearch="search()" placeholder="请输入您所在的位置" value="">

    </div>
    </div>
<div class="btn" >
  <p>地址：<span id="btn"></span></p>

<button class="le"  onclick="ditu()">当前位置</button><button style="background-color:#fc6d4d" class="ri"  onclick="submit()">确定位置</button>
<div class="clearfix"></div>
</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
    ditu1()


      };
      var map;
      function ditu1() {
        var bMap = api.require('bMap');
      bMap.getLocation({
          accuracy: '100m',
          autoStop: true,
          filter: 1
      }, function(ret, err) {
          if (ret.status) {
  functionName1(ret)


          } else {
          }
      });

      }
      function functionName1(data3) {
        var map = api.require('bMap');
      map.getNameFromCoords({
          lon: data3.lon,
          lat: data3.lat
      }, function(ret, err) {
          if (ret.status) {
        var  zzzzh= ret.address


              $api.text($api.byId("btn"), zzzzh );
              ditufx(data3)
          }
      });
      }
function ditu() {
  var bMap = api.require('bMap');
bMap.getLocation({
    accuracy: '100m',
    autoStop: true,
    filter: 1
}, function(ret, err) {
    if (ret.status) {

  ditufx(ret)
    functionName(ret)
    } else {
    }
});

}
function functionName(data2) {
  var map = api.require('bMap');
map.getNameFromCoords({
    lon: data2.lon,
    lat: data2.lat
}, function(ret, err) {
    if (ret.status) {
  var  zzzzh= ret.address

      $api.attr($api.byId("search"), 'value',zzzzh );
        $api.text($api.byId("btn"), zzzzh );

    }
});
}
function ditufx(data1){
   map = api.require('bMap');

//打开地图
  map.open({
    rect: {
        x: 0,
        y:50,
        w: api.frameWidth,
        h:api.frameHeight-160,
    },
    center: {
        lon: data1.lon,
        lat: data1.lat
    },
      zoomLevel: 16,
      showUserLocation: true,
      fixedOn: api.frameName,
      fixed: false
  }, function(ret) {
      if (ret.status) {
          console.log('地图打开成功');
      }
  });
  //大头针
  map.addAnnotations({
      annotations: [{
          id: 1,
          lon: data1.lon,
          lat:data1.lat
      }],

      draggable: true
  });

  map.setCenter({
    coords: {
        lon: data1.lon,
        lat: data1.lat
    },
    animation: false
});
var search2=$api.text($api.byId("btn"));
api.sendEvent({
    name: 'publicitem_win',
    extra: {
      lon: data1.lon,
      lat: data1.lat,
      didian:search2
    }
});

}
//搜索传值
function search() {
  var search=document.getElementById('search').value;
  var btn=document.getElementById('btn')

   var btnte=$api.text(btn,search )
   var search1=document.getElementById('search').value;
   var btn1=document.getElementById('btn')
   var btnte1=$api.text(btn)
   var map = api.require('bMap');
   map.getCoordsFromName({
       address: btnte1
   }, function(ret, err) {
       if (ret.status) {
           ditufx(ret);
       }else {
         api.toast({
             msg: '您搜索的地区不存在',
             duration: 2000,
             location: 'bottom'
         });

       }
   });
 }
//  function search1() {
//    var search=document.getElementById('search').value;
//    var btn=document.getElementById('btn')
//
//     var btnte=$api.text(btn,search )
//     var search1=document.getElementById('search').value;
//     var btn1=document.getElementById('btn')
//     var btnte1=$api.text(btn)
//     var map = api.require('bMap');
//     map.getCoordsFromName({
//         address: btnte1
//     }, function(ret, err) {
//         if (ret.status) {
//             ditufx(ret);
//         }else {
//           api.toast({
//               msg: '您搜索的地区不存在',
//               duration: 2000,
//               location: 'bottom'
//           });
//
//         }
//     });
//   }
//   // 小键盘
// function myFunction(){
//   var search=document.getElementById('search').value;
//   var btn=document.getElementById('btn')
//
//    var btnte=$api.text(btn,search )
//    var search1=document.getElementById('search').value;
//    var btn1=document.getElementById('btn')
//    var btnte1=$api.text(btn)
//    var map = api.require('bMap');
//    map.getCoordsFromName({
//        address: btnte1
//    }, function(ret, err) {
//        if (ret.status) {
//            ditufx(ret);
//        }else {
//          api.toast({
//              msg: '您搜索的地区不存在',
//              duration: 2000,
//              location: 'bottom'
//          });
//
//        }
//    });
// }
//确定位置
function submit() {


// console.log(search2);
// api.sendEvent({
//     name: 'publicitem_win',
//     extra: {
//         didian:search2
//
//     }
// });
api.closeWin({

});

  }

  // map1 = api.require('bMap');
  // map1.open({
  //  rect: {
  //      x: 0,
  //      y:50,
  //      w: api.frameWidth,
  //      h:api.frameHeight-150,
  //  },
  //  center: {
  //      lon: data.lon,
  //      lat: data.lat
  //  },
  //    zoomLevel: 16,
  //    showUserLocation: true,
  //    fixedOn: api.frameName,
  //    fixed: false
  // }, function(ret) {
  //    if (ret.status) {
  //        console.log('地图打开成功');
  //    }
  // });
  //大头针
  // map1.addAnnotations({
  //       annotations: [{
  //           id: 1,
  //           lon:data.lon,
  //           lat: data.lat
  //       }],
  //
  //       draggable: true
  //   });
  //路线
//   map.searchRoute({
//     id: 1,
//     type: 'drive',
//     policy: 'ecar_fee_first',
//     start: {
//         lon: data.lon,
//         lat: data.lat
//     },
//     end: {
//         lon: data.lon,
//         lat: data.lat
//     }
// }, function(ret, err) {
//     if (ret.status) {
//       console.log();
//     }
// });
  </script>
  </html>
